<template>
    <div class="itemMusicTop">
        <div class="itemTop">
            <img :src="playList.coverImgUrl" alt="" class="bigImg">
            <div class="itemLeft">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zuojiantou"></use>
                </svg>
            <span>歌单</span>
        </div>
        <div class="itemRight">
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-31liebiao"></use>
            </svg>
        </div>
        </div>
        <div class="itemContent">
            <div class="contentLeft">
                <img :src="playList.coverImgUrl" alt="" >
                <div class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gl-play"></use>
                </svg>
                <span>{{changeCount(playList.playCount)}}</span>
                </div>
            </div>
        <div class="contentRight">
            <h5>{{playList.name}}</h5>
            <div class="author">
                <img :src="creator.backgroundUrl" alt="">
                <span>{{creator.nickname}}</span>
            </div>
            <p>{{playList.description}}</p>
        </div>
        </div>
        <div class="itemBottom">
            <div class="itemfooter">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31xiaoxi"></use>
                </svg>
                <span>{{changeCount(playList.commentCount)}}</span>
            </div>
             <div class="itemfooter">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <span>{{changeCount(playList.shareCount)}}</span>
            </div>
             <div class="itemfooter">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <span>下载</span>
            </div>
             <div class="itemfooter">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-show_duoxuan"></use>
                </svg>
                <span>多选</span>
            </div>
      </div>
    </div>
    
</template>

<script>
export default {
    setup (props) {
        console.log(props);
        const changeCount=(num)=>{
                if(num>=100000000){
                    return (num/100000000).toFixed(1)+"亿"
                }else if(num>=10000){
                    return (num/10000).toFixed(1)+"万"
                }else{
                    return num
                }
            }
            return {changeCount}
    },
    props:['playList','creator']
}
</script>

<style lang="less" scoped>
.itemMusicTop{
    padding-bottom: 10px;
   .itemTop{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .itemLeft,.itemRight{
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 20px;
        color: aliceblue;
    }
    .bigImg{
        width: 100%;
        height: 550px;
        position: absolute;
        z-index: -1;
         filter: blur(20px);
        //  border-radius: 0.2rem;
    }
}
.itemContent{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .contentLeft{
        // width: 35%;
        position: relative;
        img{
            width: 130px;
            border-radius: 10px;
            margin: 10px;
        }
        .playCount{
                position: absolute;
                display: flex;
                flex-direction: row;
                align-items: center;
                top: 10px;
                right: 15px;
                margin-right: 5px;
                font-size: 12px;
                color: #fff;
                .icon{
                    width: 20px;
                    height: 20px;
                    color: #fff;
                }
        }  
    }
    .contentRight{
        width: 60%;
        margin: 10px;
        padding: 5px 0 0 5px;
        h5{
            color: aliceblue;
        }
        .author{
            margin: 15px 0;
            height: 30px;
            img{
            width: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }
        span{
            font-size: 14px;
            margin-left: 10px;
            color: #b4a29b
        }
        }
        p{
            font-size: 12px;
            color: #cccccc;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; 
            text-overflow: ellipsis; 
            display: -webkit-box; 
            -webkit-line-clamp: 2; 
            line-clamp: 2; 
            -webkit-box-orient: vertical;
        }
    }

}
.itemBottom{  
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
    .itemfooter{
        // 灵活的项目将垂直显示，正如一个列一样。
        display: flex;
        flex-direction: column;
        color: aliceblue;
        align-items: center;
        .icon{
        width: 30px;
        height: 30px;
         fill: #fff;
         use{
            width: 100%;
         }
    }
    span{
        margin-top: 10px;
        font-size: 14px;
    }
    }
    
} 
}

</style>